{"componentChunkName":"component---src-templates-article-js","path":"/article/metoda-mockupu-moj-sposob-na-pisanie-czystszego-kodu","result":{"data":{"strapiArticles":{"title":"Metoda mockup'u - mój sposób na pisanie czystszego kodu.","content":"Jest wiele zasad, które pomagają nam pisać czystszy i bardziej skalowalny kod (SOLID, KISS, DRY, YAGNI i tak dalej) ale niedawno wymyśliłem własną metodę, która umożliwia mi mieć kod bardziej pod kontrolą. Możliwe, że ta metoda działa tylko w moich przypadkach ale chciałbym podzielić się nią, ponieważ może zainspiruję Cię nieco do eksperymentowania na własnym przykładzie. Sposób ten polega na pisaniu na początku wysoko poziomowego kodu (poprzez zrozbienie mockup'u), a następnie zamykanie poszczególnych zadań i niższych poziomów abstracji w kolejnych plikach, metodach, w zależności od Twojej architektury.\n\nAby wytłumaczyć dokładniej co mam na myśli, nadajmy sobie jakiś kontekst: chciałbym dodać nową funcjonalność do mojej super oryginalnej aplikacji to-do 🤭. Na przykład, chciałbym pobrać informacje o notatkach z bazy danych i wykonać na nich parę operacji takich jak sortowanie, filtrowanie i modyfikowanie. Aby było prościej, to są dane, na których będziemy pracować:\n\n```\n[{ title: \"buy a milk\", completed: false }, \n  { title: \"feed the dog\", completed: true }, \n  { title: \"go for a walk\", completed: false }, \n  { title: \"design a layout\", completed: true }, \n  { title: \"do an English lesson\", completed: true }] \n```\n \nJeżeli nie jesteś zaznajomiony z podstawowymi zasadami pisania czystego kodu takich jak zasada jednej odpowiedzialności (single responsibility principle) Twoje rozwiązanie może wygląda mniej więcej tak:\n\n \n```\nfunction getAndProcesssTodos() { \n    const data = fetchFromSomewhere(); \n    const sortedData = data.sort((a, b) => a.title > b.title ? 1 : -1) \n    const filteredData = sortedData.filter(data => data.completed === true); \n\n    for (let i = 0; i < filteredData.length; i++) { \n        filteredData[i].title = filteredData[i].title.toUpperCase();\n        filteredData[i].title = `completed: ${filteredData[i].title}`;  \n    } \n\n    const modifiedData = filteredData.map(item => ({...item, title: item.title.toUpperCase()}))  \n    return modifiedData; \n\n} \n\nconsole.log(getAndProcesssTodos()) \n\n [{ title: 'COMPLETED: DESIGN A LAYOUT', completed: true },  \n  { title: 'COMPLETED: DO AN ENGLISH LESSON', completed: true },  \n  { title: 'COMPLETED: FEED THE DOG', completed: true } ] \n\n```\n\nJak widzisz, ten kod ma parę problemów. Nie jest reużywalny, trudny w utrzymaniu i debugowaniu, ponieważ nie zaplanowaliśmy wcześniej naszego planu działania. Zamiast pisać kolejne bazgroły, zatrzymajmy się na chwilę i zastanówmy się, jakie kroki musimy wykonać, aby ukończyć nasze zadanie pomyślnie.\n\n- Pobierz zadania\n- Posortuj\n- Filtruj\n- Oznacz jakoś ukończone zadania\n- Modifikuj\n- Wzróć rezultat\n\nTrzymajmy się naszego planu i twórzmy mockup naszej funkcji bez wchodzenia w szczegóły.\n\n```\nfunction getTodos() { \n  const todos = fetchTodos();\n  const sortedTodos = sortTodos(todos);\n  const filteredTodos = filterTodos(sortedTodos);\n  const modyfiedTodos = modifyTodos(filteredTodos);\n\n  return modifiedTodos;\n} \n```\n\nNa tym etapie nie skupiam się na tym jak te funkcje dokładnie wyglądają. Zamiast tego robię mockup **jak chciałbym aby wyglądał mój kod.** Teraz widzimy, że nasz kod jest podzielony na poszczególne odpowiedzialności, jest łatwiejszy i utrzymaniu i debugowaniu i nawet wygląda jak byśmy chceli. Również zmieniłem nazwy funkcji by określić, co dokładnie robią. Teraz możemy zaimplementować te funkcje.\n\nAle spójrzmy on tę funkcje raz jeszcze. Widzimy niepotrzebną redundancję w nazwach:  fetchTodos, sortTodos, filteredTodos. Wszędzie są todos! To sugeruje, aby rozwiązać ten problem w jakiś sposób. Możemy na przykład zamknąć nasze funkcje w klasie i tak zarządzać naszymi zadaniami. To brzmi jak dobry plan. Zrobimy klasę todos, i pozbędziemy się 'Todos' w nazwie każdej metody. Zobaczmy, jak możemy to osiągnąć z klasami ES6.\n\n```\nclass Todos { \n    constructor(todos) { \n        this.todos = todos; \n    } \n    get() { \n        return this.todos; \n    } \n    sort() { \n        this.todos = this.todos.sort((a, b) => a.title > b.title ? 1 : -1) \n        return this; \n    } \n    filter() { \n        this.todos = this.todos.filter(todo => todo.completed); \n        return this; \n    } \n    markCompleted() { \n        this.todos = this.todos.map(todo => ({ ...todo, title: `completed: ${todo.title}` })); \n        return this; \n    } \n    upperCaseTodos() { \n        this.todos = this.todos.map(todo => ({...todo, title: todo.title.toUpperCase()})); \n        return this; \n    } \n} \n \n\nconst todos = new Todos([ \n  { title: \"buy a milk\", completed: false }, \n  { title: \"feed the dog\", completed: true }, \n  { title: \"go for a walk\", completed: false }, \n  { title: \"design a layout\", completed: true }, \n  { title: \"do an English lesson\", completed: true }, \n]); \n \nconsole.log(todos\n    .filter() \n    .markCompleted() \n    .upperCaseTodos() \n    .sort() \n    .get()); \n\n\n[ { title: 'COMPLETED: DESIGN A LAYOUT', completed: true },  \n  { title: 'COMPLETED: DO AN ENGLISH LESSON', completed: true },  \n  { title: 'COMPLETED: FEED THE DOG', completed: true } ]  \n```\n\nTeraz możesz zauważyć jak wiele benefitów zyskaliśmy tylko poprzez zrobienie prostej listy kroków i mockup'u z odpowiednimi nazwami zmiennych. Mogliśmy dzięki temu znależć problem i zaproponować rozwiązanie. W dodatku, korzytając z chainingu możemy dowolnie łączyć nasze metody and wywoływać je w różnej kolejności co daje nam większą elastyczność. Oczywiście, przy bardziej skomplikowanych zadaniach możemy ponownie zasosować tę metodę, rozbić zadania na mniejsze i zamockować kod. Ten sposób pisania kodu pomaga mi właśnie w rozdzielaniu dużych problemów na mniejsze i budowania ich krok po kroku.","date":"2021-06-24","minutesToRead":5,"slug":"metoda-mockupu-moj-sposob-na-pisanie-czystszego-kodu","categories":[{"name":"other"}]}},"pageContext":{"slug":"metoda-mockupu-moj-sposob-na-pisanie-czystszego-kodu"}},"staticQueryHashes":["3114346481"]}